<template>
  <div class="trend-container">
    <select
      class="title"
      v-model="selected"
      @change="handleChange()"
      :style="{ 'font-size': baseSize / 2 + 'px' }"
    >
      <option value="map">区域销量趋势</option>
      <option value="seller">商家销量趋势</option>
      <option value="commodity">商品销量趋势</option>
    </select>
    <div id="trend">趋势</div>
  </div>
</template>

<script>
import mixin from "../utils/mixin";
export default {
  computed: {
    // 配置项
    option() {
      return {
        title: {
          // text: "销量趋势",
          // textStyle: {
          //   fontSize: this.baseSize / 1.5,
          // },
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: this.legendArr,
          left: this.baseSize / 4,
          top: "15%",
          icon: "circle",
          itemWidth: this.baseSize / 4,
          itemHeight: this.baseSize / 4,
        },
        grid: {
          top: "35%",
          left: "3%",
          right: "4%",
          bottom: "1%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: this.categoryData,
          boundaryGap: false,
        },
        yAxis: {
          type: "value",
          axisLabel: {
            formatter: "{value}",
          },
        },
        series: this.seriesArray,
      };
    },
  },
  mixins: [mixin],
  data() {
    return {
      categoryData: null,
      seriesArray: null,
      legendArr: null,
      colorArr1: [
        "rgba(11,168,44,0.5)",
        "rgba(44,110,255,0.5)",
        "rgba(22,242,217,0.5)",
        "rgba(254,33,30,0.5)",
        "rgba(250,105,0,0.5)",
      ],
      colorArr2: [
        "rgba(11,168,44,0)",
        "rgba(44,110,255,0)",
        "rgba(22,242,217,0)",
        "rgba(254,33,30,0)",
        "rgba(250,105,0,0)",
      ],
      selected: "map",
    };
  },
  mounted() {
    // console.log(this.baseSize);
    this.init("trend", "api/trend");
    this.renderChart();
  },
  methods: {
    dealData() {
      console.log(this.originData);
      this.categoryData = this.originData.common.month;
      this.tools(this.selected);
    },
    // 根据原始数据和选择项设置seriesArray数据
    tools(p) {
      this.seriesArray = this.originData[p].data.map((item, index) => {
        return {
          data: item.data,
          name: item.name,
          type: "line",
          stack: "map",
          areaStyle: {
            color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: this.colorArr1[index],
              },
              {
                offset: 1,
                color: this.colorArr2[index],
              },
            ]),
          },
        };
      });
      this.legendArr = this.seriesArray.map((item) => {
        return item.name;
      });
    },
    handleChange() {
      this.dealData();
      this.updateChart();
    },
  },
  //
};
</script>

<style lang="less" scoped>
.trend-container {
  position: relative;
  height: 100%;
  width: 100%;
  .title {
    position: absolute;
    top: 5%;
    left: 2%;
    padding-right: 20px;
    // font-size: 80px;
    color: aliceblue;
    z-index: 1000;
    background: rgb(34, 39, 51);
    border: rgb(34, 39, 51);
    outline: none;
  }
  #trend {
    width: 100%;
    height: 100%;
  }
}
</style>